<template>
    <div>
        <el-dialog :title="title + '联络灯请求类型'" :visible.sync="dialogVisible" width="730px" @close='close'
            :close-on-click-modal='false'>
            <div class="dialogBody">
                <el-form :inline="true" :model="form" :rules="rules" label-width="120px" size="mini" ref="form">
                    <el-form-item label="联络灯请求" prop="name">
                        <el-input v-model="form.name" placeholder="请输入联络灯请求"></el-input>
                    </el-form-item>
                    <el-form-item label="颜色标识" prop="color">
                        <el-color-picker v-model="form.color" size="medium"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="分级通知" class="tableItem">
                        <gradeTable ref="table" @getRemoveIds='getRemoveIds'></gradeTable>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="footer">
                <el-button size="mini" @click='dialogVisible = false'>取 消</el-button>
                <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import gradeTable from './gradeTable.vue'
    import {
        lampTypeEdit
    } from '@/api/lampController'
    export default {
        data() {
            return {
                form: {
                    id:null,
                    groupId:'',
                    name: '',
                    color: '#0084FF',
                    removeLampTypeNoticeIds:[]
                },
                rules: {
                    name: [{
                        required: true,
                        message: '联络灯请求不能为空',
                        trigger: 'blur'
                    }]
                },
                dialogVisible: false,
                title: '添加'
            }
        },
        components:{
            gradeTable
        },
        methods: {
            open(payload) {
                const {type,groupId,row} = payload
                this.form.groupId = groupId
                switch (type) {
                    case 'add':
                        this.title = '添加'
                        break;
                    case 'edit':
                        const {color,name,id,lampTypeNotices} = row
                        this.title = '编辑'
                        this.form.id = id
                        this.$nextTick(()=>{
                            this.form.name = name
                            this.form.color = color
                            this.$refs.table.visibleChange(true)
                            this.$refs.table.updateTable(lampTypeNotices)
                        })
                        break;
                }
                this.dialogVisible = true
            },
            close() {
                this.form.id = null
                this.form.removeLampTypeNoticeIds = []
                this.$refs.form.resetFields()
                this.$refs.table.close()
            },
            //联络灯分级通知被移除的id
            getRemoveIds(id){
                this.form.removeLampTypeNoticeIds.push(id)
            },
            //添加联络灯
            lampTypeEditFn(data) {
                lampTypeEdit(data).then(res => {
                    if (res.code == 200) {
                        this.dialogVisible = false
                        this.$emit('updateList')
                    }
                })
            },
            //确定
            confirm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let userWarning = false
                        let gradeWarning = false
                        const lampTypeNotices = this.$refs.table.getTabelInfo()
                        userWarning = lampTypeNotices.some(i => !i.userIdList.length)
                        gradeWarning = lampTypeNotices.some(i => !i.infoType.length)
                        this.form.lampTypeNotices = lampTypeNotices
                        if(userWarning){
                            this.utils.showMsg('请添加接收通知的人员', 'warning')
                        }else if(gradeWarning){
                            this.utils.showMsg('分级通知至少选择一种通知方式', 'warning')
                        }else{
                            this.lampTypeEditFn(this.form)
                        }
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-form-item--mini.el-form-item {
        width: 90%;

        /deep/ .el-form-item__content {
            width: 60%;
        }

        .el-input-number--mini,
        .el-input--mini,
        .el-select {
            width: 100%;
        }
    }

    .tableItem{
        /deep/ .el-form-item__content {
            width: 100% !important;
            padding-left: 50px;
            margin-top: 20px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 8px 20px 0 20px;

        .dialogBody {
            padding-top: 18px;
            max-height: 520px;
            overflow-y: auto;
        }
    }

    /deep/ .el-dialog__footer {
        text-align: center;

        .footer {
            .el-button--mini {
                padding: 7px 40px;
            }
        }
    }
</style>